<template>
  <div class="club-profile">
    <div class="page-header">
      <h1>社团信息维护</h1>
      <p>管理社团的基本信息和设置</p>
    </div>
    
    <el-form
      ref="profileFormRef"
      :model="profileForm"
      :rules="profileRules"
      label-width="120px"
      class="profile-form"
    >
      <el-card class="form-card">
        <template #header>
          <div class="card-header">
            <span>基本信息</span>
          </div>
        </template>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="社团名称" prop="club_name">
              <el-input
                v-model="profileForm.club_name"
                placeholder="请输入社团名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="社团分类" prop="category">
              <el-select
                v-model="profileForm.category"
                placeholder="请选择分类"
                style="width: 100%"
              >
                <el-option
                  v-for="category in categories"
                  :key="category.value"
                  :label="category.label"
                  :value="category.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="社团Logo">
          <el-upload
            class="logo-uploader"
            :show-file-list="false"
            :before-upload="beforeLogoUpload"
            :http-request="handleLogoUpload"
          >
            <img v-if="profileForm.logo_url" :src="profileForm.logo_url" class="logo-preview" />
            <el-icon v-else class="logo-uploader-icon"><Plus /></el-icon>
          </el-upload>
          <div class="upload-tip">建议尺寸：200x200px，支持 JPG、PNG 格式</div>
        </el-form-item>
        
        <el-form-item label="社团简介" prop="description">
          <el-input
            v-model="profileForm.description"
            type="textarea"
            :rows="4"
            placeholder="请输入社团简介"
            maxlength="500"
            show-word-limit
          />
        </el-form-item>
      </el-card>
      
      <el-card class="form-card">
        <template #header>
          <div class="card-header">
            <span>联系方式</span>
          </div>
        </template>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="联系人" prop="contact_person">
              <el-input
                v-model="profileForm.contact_person"
                placeholder="请输入联系人姓名"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="contact_phone">
              <el-input
                v-model="profileForm.contact_phone"
                placeholder="请输入联系电话"
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="联系邮箱" prop="contact_email">
          <el-input
            v-model="profileForm.contact_email"
            placeholder="请输入联系邮箱"
          />
        </el-form-item>
      </el-card>
      
      <div class="form-actions">
        <el-button @click="handleReset">重置</el-button>
        <el-button type="primary" @click="handleSave" :loading="saving">
          保存
        </el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

export default {
  name: 'ClubProfile',
  components: {
    Plus
  },
  setup() {
    const profileFormRef = ref()
    const saving = ref(false)
    
    const profileForm = reactive({
      club_name: '摄影社团',
      category: '文艺类',
      logo_url: '',
      description: '用镜头记录美好瞬间，分享摄影技巧，一起探索摄影的奥秘。我们定期组织外拍活动、技术分享会和作品展览，欢迎所有热爱摄影的同学加入！',
      contact_person: '张三',
      contact_phone: '13800138001',
      contact_email: 'photo@example.com'
    })
    
    const categories = ref([
      { label: '学术类', value: '学术类' },
      { label: '体育类', value: '体育类' },
      { label: '文艺类', value: '文艺类' },
      { label: '科技类', value: '科技类' },
      { label: '公益类', value: '公益类' }
    ])
    
    const profileRules = {
      club_name: [
        { required: true, message: '请输入社团名称', trigger: 'blur' },
        { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
      ],
      category: [
        { required: true, message: '请选择社团分类', trigger: 'change' }
      ],
      description: [
        { required: true, message: '请输入社团简介', trigger: 'blur' },
        { min: 10, max: 500, message: '长度在 10 到 500 个字符', trigger: 'blur' }
      ],
      contact_person: [
        { required: true, message: '请输入联系人', trigger: 'blur' }
      ],
      contact_phone: [
        { required: true, message: '请输入联系电话', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
      ],
      contact_email: [
        { required: true, message: '请输入联系邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
      ]
    }
    
    const beforeLogoUpload = (file) => {
      const isImage = file.type.startsWith('image/')
      const isLt2M = file.size / 1024 / 1024 < 2
      
      if (!isImage) {
        ElMessage.error('只能上传图片文件!')
        return false
      }
      if (!isLt2M) {
        ElMessage.error('图片大小不能超过 2MB!')
        return false
      }
      return true
    }
    
    const handleLogoUpload = (options) => {
      // 这里实现文件上传逻辑
      console.log('上传文件:', options.file)
      // 模拟上传成功
      setTimeout(() => {
        profileForm.logo_url = URL.createObjectURL(options.file)
        ElMessage.success('Logo上传成功')
      }, 1000)
    }
    
    const handleSave = async () => {
      if (!profileFormRef.value) return
      
      try {
        await profileFormRef.value.validate()
        saving.value = true
        
        // 这里实现保存逻辑
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        ElMessage.success('保存成功')
      } catch (error) {
        if (error.message) {
          ElMessage.error(error.message)
        }
      } finally {
        saving.value = false
      }
    }
    
    const handleReset = () => {
      if (profileFormRef.value) {
        profileFormRef.value.resetFields()
      }
    }
    
    onMounted(() => {
      // 初始化数据
    })
    
    return {
      profileFormRef,
      profileForm,
      categories,
      profileRules,
      saving,
      beforeLogoUpload,
      handleLogoUpload,
      handleSave,
      handleReset
    }
  }
}
</script>

<style lang="scss" scoped>
.club-profile {
  .page-header {
    margin-bottom: 24px;

    h1 {
      margin: 0 0 8px;
      font-size: 28px;
      font-weight: 600;
      color: #303133;
    }

    p {
      margin: 0;
      font-size: 16px;
      color: #606266;
    }
  }

  .profile-form {
    .form-card {
      margin-bottom: 24px;

      .card-header {
        font-size: 16px;
        font-weight: 600;
        color: #303133;
      }
    }

    .logo-uploader {
      :deep(.el-upload) {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: border-color 0.2s;

        &:hover {
          border-color: #409eff;
        }
      }

      .logo-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
      }

      .logo-preview {
        width: 120px;
        height: 120px;
        object-fit: cover;
        display: block;
      }

      .upload-tip {
        margin-top: 8px;
        font-size: 12px;
        color: #909399;
      }
    }

    .form-actions {
      text-align: center;
      padding: 20px 0;

      .el-button {
        min-width: 100px;
      }
    }
  }
}
</style>
